<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select v-model="listQuery.clusterName" clearable filterable class="filter-item" placeholder="请选择集群">
        <el-option v-for="(item, index) in clusterOptions" :key="index" :label="item" :value="item"/>
      </el-select>
      <el-select v-model="listQuery.idcId" clearable filterable class="filter-item" style="margin-left: 10px;" value-key="id" placeholder="请选择机房">
        <el-option v-for="item in idcOptions" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('common.query') }}</el-button>
    </div>
    <div class="cabinet-box">
      <div v-for="list in cabinetList" :key="list.id" class="shelf">
        <el-button type="primary" class="numText">{{ list.physicalEquipmentName }}</el-button>
        <ul class="box">
          <li v-for="item in concatList(list.shelfList)" :key="item.id">
            <div v-if="item.sn" :class="{'twoColumn': item.height > 1, }" :style="{top:-(16 * (item.height - 1))+'px'}" class="device-column" >
              <el-popover :title="item.sn" placement="top" width="260" trigger="click">
                <div>
                  <el-button size="mini" type="primary" style="float:left" @click="editServer(item.id)">编辑</el-button>
                  <el-button size="mini" type="primary" @click="detailServer(item.id)">详情</el-button>
                  <el-button size="mini" type="primary" @click="virtualUnit(item.id)">虚拟设备(0)</el-button>
                </div>
                <img slot="reference" :src="'../static/images/'+ item.type + item.height +'u.png'" :alt="item.purpose" >
              </el-popover>
              <span class="config">{{ item.sn }}</span>
              <span class="servername">{{ item.purpose ? item.purpose : item.hostName }}</span>
            </div>
            <div v-else class="device-column">
              <el-popover :title="item.id+'U'" placement="top" width="100" trigger="click">
                <div>
                  <el-button size="mini" type="primary" @click="addDevice(item.id)">上架</el-button>
                </div>
                <img slot="reference" :src="'../static/images/blank.png'" :alt="item.purpose" >
              </el-popover>
              <span class="config" style="color:#C0C4CC">{{ item.id }}U</span>
              <span class="servername">{{ item.serverName }}</span>
            </div>
          </li>
        </ul>
        <el-button type="primary" class="addServer">{{ list.cabinetSerial }}</el-button>
      </div>
    </div>

    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item :label="$t('table.name')" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
.cabinet-box {
  width: 100%;
  .shelf {
    border: 10px solid #a5a5a5;
    margin: 40px 115px 60px;
    position: relative;
    width: 160px;
    display: inline-block;
    .box {
      border: 10px solid #e5e5e5;
      min-height:620px;
      width: 140px;
      padding:6px 0 0;
      margin: 0;
      li {
        margin-left: -5px;
        position: relative;
        top:0;
        list-style-type: none;
        cursor: pointer;
        line-height: 16px;
        height:16px;
        font-size: 13px;
        .device-column {
          min-height: 16px;
        }
        .twoColumn {
          min-height: 29px;
          position: absolute;
          width:100%;
          z-index:10;
          background:#fff;
        }
        img {
          vertical-align: top;
          background:#fff;
        }
        img:hover {
          padding-left: 10px;
        }
        span {
          position: absolute;
          top: -1px;
          width: 130px;
        }
        .config {
          left: -150px;
          text-align: right;
          color: blue;
          background: #fff;
        }
        .servername {
          left: 150px;
        }
      }
    }
    .numText,.addServer {
      position: absolute;
      top: -50px;
      left: 50%;
      margin-left: -80px;
      width: 160px;
    }
    .addServer {
      top:102%;
      bottom: -50px;
    }
  }
}
</style>
<script>
import {
  fetchCabinetDeployList,
  fetchClusterList,
  fetchIdcList
  // create,
  // update,
  // del
} from '@/api/cabinetDeployment'

export default {
  name: 'ComplexTable',
  filters: {},
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        clusterName: '',
        idcId: '',
        page: 1,
        limit: 20
      },
      clusterOptions: [],
      idcOptions: [],
      cabinetList: [],
      sortOptions: [
        { label: 'ID Ascending', key: '+id' },
        { label: 'ID Descending', key: '-id' }
      ],
      temp: {
        id: undefined,
        name: '',
        comment: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      rules: {
        comment: [{ required: true, message: '描述是必填项', trigger: 'blur' }],
        name: [{ required: true, message: '名称是必填项', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.getClusterList()
    this.getIdcList()
    this.getCabinetList()
  },
  methods: {

    // 合并U元素
    concatList: function(list) {
      return list.slice().reverse().sort((a, b) => {
        return a.value - b.value
      })
    },
    // 获取集群
    getClusterList() {
      fetchClusterList().then(response => {
        this.clusterOptions = response.data
      })
    },

    // 获取机房
    getIdcList() {
      fetchIdcList().then(response => {
        this.idcOptions = response.data.records
      })
    },

    // 获取机柜部署图
    getCabinetList() {
      fetchCabinetDeployList(this.listQuery).then(response => {
        this.cabinetList = response.data
      })
    },
    // handleFilter() {
    //   this.listQuery.page = 1
    //   this.getList()
    // },
    // handleSizeChange(val) {
    //   this.listQuery.limit = val
    //   this.getList()
    // },
    // handleCurrentChange(val) {
    //   this.listQuery.page = val
    //   this.getList()
    // },
    // 上架
    addDevice(id) {},
    // 编辑
    editServer(id) {},
    // 详情
    detailServer(id) {},
    virtualUnit(id) {},
    // 查询
    handleQuery() {
      this.listQuery.page = 1
      this.getCabinetList()
    },
    showAdd(id) {
      console.log(id)
    }
    //     function showTips(domid,did,isvirtual,virtualnm){
    //   var tools='<a class="btn btn-minier btn-yellow" href="/idcservers/modify-'+did+'.htm">编辑</a> <a class="btn btn-minier btn-yellow" href="/idcservers/view-'+did+'.htm">详情</a> ';
    //   if(isvirtual){
    //       tools=tools + '<a class="btn btn-minier btn-yellow" href="/idcvirtual/list.htm?serverid='+did+'">虚拟设备('+virtualnm+')</a> ';
    //   }

    //   layer.tips('<div id="tiptools">'+tools+'</div>', '#'+domid,{
    //        tips: 1
    //   });
    // }

    // function showAdd(domid,uid,cid){
    //    layer.tips('<div id="tiptools"> <a class="btn btn-minier btn-info" href="/idcservers/add.htm?up='+uid+'&cid='+cid+'">上架</a></div> ', '#'+domid,{
    //      tips: 1
    //   });
    // }

    // function showIP(id,domid){
    //   layer.tips($('#'+id).text(), $(domid),{
    //      tips: 4
    //   });
    // }
    // 删除操作
    // handleDelete(row) {
    //   this.$confirm('此删除操作不可还原, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     del(row).then(response => {
    //       this.getList()
    //       this.$message({
    //         type: 'success',
    //         message: '删除成功!'
    //       })
    //     })
    //   }).catch(() => {
    //   })
    // },

    // resetTemp() {
    //   this.temp = {
    //     id: undefined,
    //     name: '',
    //     comment: ''
    //   }
    // },

    // handleCreate() {
    //   this.resetTemp()
    //   this.dialogStatus = 'create'
    //   this.dialogFormVisible = true
    //   this.$nextTick(() => {
    //     this.$refs['dataForm'].clearValidate()
    //   })
    // },

    // createData() {
    //   this.$refs['dataForm'].validate((valid) => {
    //     if (valid) {
    //       create(this.temp).then(() => {
    //         this.getList()
    //         this.dialogFormVisible = false
    //         this.$notify({
    //           title: '成功',
    //           message: '创建成功',
    //           type: 'success',
    //           duration: 2000
    //         })
    //       })
    //     }
    //   })
    // },

    // handleUpdate(row) {
    //   this.temp = Object.assign({}, row) // copy obj
    //   this.dialogStatus = 'update'
    //   this.dialogFormVisible = true
    //   this.$nextTick(() => {
    //     this.$refs['dataForm'].clearValidate()
    //   })
    // },
    // 更新
    // updateData() {
    //   this.$refs['dataForm'].validate((valid) => {
    //     if (valid) {
    //       const tempData = Object.assign({}, this.temp)
    //       update(tempData).then(() => {
    //         this.getList()
    //         this.dialogFormVisible = false
    //         this.$notify({
    //           title: '成功',
    //           message: '更新成功',
    //           type: 'success',
    //           duration: 2000
    //         })
    //       })
    //     }
    //   })
    // }
  }
}
</script>
